<template>
  <div class="page_wrap" @contextmenu="handleMouse">
    <div class="top_warp" v-on:dblclick="hitMax">
      <div class="logo" v-on:mousedown="hitCaption"><img src="./assets/imgs/logo.jpg" style="width:130px;" />
        <div style="margin-left:100px;">
          <!-- <input type="text" v-model="search" placeholder="搜索歌曲"> -->
        </div>
      </div>
      <div class="tool">
        <div class="tools" v-on:click="$router.push('/setting')">
          <img src="./assets/svg/setting.svg" style="width:20px;">
        </div>
        <div class="tools" v-on:click="$router.push('/message')">
          <img src="./assets/svg/message.svg" style="width:20px;">
        </div>
        <div class="tools" v-on:click="$router.push('/about')">
          <img src="./assets/svg/about.svg" style="width:20px;">
          <!-- 关于 -->
        </div>
        <div style="margin-left:20px;border-right:1px solid #cdcdcd;width:10px;height:15px;"> </div>
        <div class="tools" v-on:click="hitMin">
          <img src="./assets/svg/min.svg" style="width:20px;">
        </div>
        <div class="tools" v-on:click="hitMax">
          <img src="./assets/svg/max.svg" style="width:20px;">
        </div>
        <div class="tools" v-on:click="hitClose">
          <img src="./assets/svg/close.svg" style="width:20px;">
        </div>
      </div>
    </div>
    <div class="left_wrap">
      <li v-on:click="$router.push('/')"><span>发现音乐</span></li>
      <li v-on:click="$router.push('/boke')">播客</li>
      <li>视频</li>
      <li>关注</li>
      <li>直播</li>
      <div style="color:#999999;font-size:12px;line-height:38px;padding-left:20px;">我的音乐</div>
      <li><img src="./assets/svg/download.svg" style="width:20px;margin-right:5px;"><span>本地与下载</span></li>
      <li><img src="./assets/svg/xihuan.svg" style="width:20px;margin-right:5px;">我喜欢得音乐</li>
      <li><img src="./assets/svg/zuijinbofang.svg" style="width:20px;margin-right:5px;">最近播放</li>
      <li><img src="./assets/svg/yunyinyue.svg" style="width:20px;margin-right:5px;">我的音乐云盘</li>
      <li><img src="./assets/svg/shoucang.svg" style="width:20px;margin-right:5px;">我的收藏</li>
    </div>
    <div class="right_wrap">
      <div class="right_content">
        <router-view></router-view>
      </div>
    </div>
    <div class="bottom_warp">
      <div style="display:flex;width:200px;">
        <div>
          <img src="./assets/imgs/song1.png"  style="width:50px;height:50px;">
        </div>
        <div style="padding:5px 0 5px 0;margin-left:10px;font-size:14px;">
          <div style="line-height:20px;">{{song.name}}</div>
          <div style="line-height:20px;">{{song.singer}}</div>
        </div>
      </div>
      <div style="width:430px;">
        <div class="play_tools">
          <div class="play_tool"><iconpark-icon name="loop-once"></iconpark-icon></div>
          <div class="play_tool"><iconpark-icon name="go-start" style="font-size:30px;"></iconpark-icon></div>
          <div class="play_tool"><iconpark-icon name="play" style="font-size:30px;"></iconpark-icon></div>
          <div class="play_tool"><iconpark-icon name="go-end" style="font-size:30px;"></iconpark-icon></div>
          <div class="play_tool"><div style="width:30px;">词</div></div>
        </div>
        <div style="height:20px;"></div>
      </div>
      <div class="play_right_tools">
        <div class="play_right_tool"><iconpark-icon name="volume-notice"></iconpark-icon></div>
        <div class="play_right_tool"><iconpark-icon name="user-to-user-transmission"></iconpark-icon></div>
        <div class="play_right_tool"><iconpark-icon name="music-list"></iconpark-icon></div>
      </div>
    </div>
  </div>
</template>

<script>
import Play from './components/play/Play.vue'
export default {
  components:{
    Play
  },
  data(){
    return{
      search:'',
      song:{
        name:'New Boy',
        singer:'房东的猫 / 陈婧霏',
        url:''
      }
    }
  },
  methods:{
    handleMouse(e){
      e.preventDefault();
    },
    hitCaption(){
      aardio.hitCaption()
    },
    hitMin(){
      aardio.hitMin()
    },
    hitMax(){
      aardio.hitMax()
    },
    hitClose(){
      aardio.hitClose()
    }
  }
}
</script>
<style>
.play_tools{
display:flex;justify-content: space-between;width:200px;margin:0 auto;height:30px;align-items: center;
}

.play_tools .play_tool{
  cursor: pointer;
  margin-left:15px;
  margin-right:15px;
}



.play_tools .play_tool:hover{
  color:#EC4141;
}

.play_right_tools{
  display:flex;width:200px;
  align-items: center;
  padding-left:70px;
}

.play_right_tool{
  margin-left: 10px;
  margin-right: 10px;
  font-size:20px;
  cursor: pointer;
}

.page_wrap{
  background-color: #fff;
  font-size: 12px;
  color:#000;
}

.top_warp{
  display: flex;
  height:50px;
  background-color: #EC4141;
  justify-content: space-between;
  align-items: center;
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  
}

.tool{
  margin-right:20px;
  color:#fff;
  display: flex;
  align-items:center;
}

.tools{
  margin-left:20px;cursor: pointer;padding-top:3px;
  /* padding:2px; */
  
}

.tools:hover{
  background-color: #E33E3E;
}

.logo{
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-left: 20px;
  width: 800px;
  display: flex;
  align-items: center;
}

.logo input{
  background-color: #E33E3E;
  border: 0px;
  padding:5px 8px;
  color:#fff;
  font-size: 16px;
  line-height: 20px;
}

.logo input:focus{
  background-color: #E33E3E;
  border: 0px !important;
}

.left_wrap{
  width: 200px;
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  padding:10px;
  background-color: #fff;
  border-right: 1px solid rgb(219, 221, 226);
  overflow-y: auto;
}

.left_wrap li{
  list-style: none;
  height:38px;
  display: flex;
  align-items: center;
  padding-left:20px;
  cursor: pointer;
  font-size: 14px;
}

.left_wrap li:hover{
  background-color: #F6F6F7;
  border-radius: 4px;
  /* color:#EC4141; */
}

.right_wrap{
  
  background-color: #fff;
  position: relative;
  margin-left: 200px;
  top: 50px;
  /* display: flex; */
  /* left: 200px; */
  
  /* width: calc(100vw - 200px); */
}

.right_content{
  height: calc(100vh - 120px);
  overflow-y:auto;
  padding:15px;
  
}

.bottom_warp{
  height:70px;
  background-color:#fff;
  position:fixed;
  bottom: 0;
  width:100%;
  border-top: 1px solid rgb(219, 221, 226);
  padding:10px;
  display: flex;
  justify-content: space-between;
}
</style>